{extend name="base"}
{block name="style"}
<!-- 这里允许在引入一些样式头部 -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="{:_static()}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/source.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/common.css" media="all" />

{/block}

{block name="main"}
<style type="text/css">
	.ws-main{padding: 15px;}
	a:hover{color: inherit !important;}
	label{box-sizing: content-box;}
</style>

	<div class="childrenBody">
    <div class="layui-form">
        <div class="row row1" style="width: 500px;">
            <div class="filter">
                <div class="source-head">
                    <label class="layui-form-label"><strong>素材导入</strong></label>
                </div>
                <div class="source-body">
                    <div class="source-cont">
                        <div class="layui-form-item tab-head">
                            <div class="layui-input-block">
                              <span class="filter-menu"><input type="radio" name="type" value="1" title="图文" checked=""></span>
                              <span class="filter-menu"><input type="radio" name="type" value="2" title="视频"></span>
                              <span class="filter-menu"><input type="radio" name="type" value="0" title="纯文字"></span>
                            </div>
                        </div>
                        <div class="tab-body">
                            <div class="tab-cont on">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-block">
                                      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="可不填" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">文字</label>
                                    <div class="layui-input-block">
                                      <textarea placeholder="点击输入" name="content" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item" id="media">
                                    <label class="layui-form-label">图片</label>
                                    <span class="layui-btn ws-uploads-btn">
                                        <i class="layui-icon">&#xe64a;</i>
                                        上传图片
                                        <input type="file" value="" class="ws-uploads" title=" ">
                                        <input type="hidden" id="filename" lay-verify="required" name="filename" value="">
                                    </span>
                                    <div class="layui-input-block">
                                        <ul class="ws-images">
                                            <!-- 这里是图片 -->
                                        </ul>
                                    </div>
                                <!-- </div> -->
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">评论内容</label>
                                    <div class="layui-input-block">
                                      <textarea placeholder="点击输入" lay-verify="required" name="comment" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">素材小组</label>
                                    <div class="layui-input-inline">
                                      <select name="cate_id" lay-verify="required" lay-filter="aihao">
                                        <option value=""></option>
                                        <!-- <option value="0" selected="">默认分组</option> -->
                                        {volist name="list" id="data"}
                                        <option value="{$data.id}">{$data.cate_name}</option>
                                        {/volist}
                                        <!-- <option value="2">222</option> -->
                                      </select>
                                    </div>
                                    <!-- <button class="layui-btn layui-btn-primary">新建分组</button> -->
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="*">导入</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="page"></div>
	</div>


<script type="text/javascript" src="{:_static()}/layui/layui.js"></script>
<script type="text/babel" type="text/javascript" src="{:_static()}/js/common.js"></script>
<script type="text/babel" type="text/javascript">
layui.config({
    base : "js/"
}).use(['form','layer','jquery','laypage','upload'],function(){
    let form = layui.form(),
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        laypage = layui.laypage,
        laydate = layui.laydate,
        $ = layui.jquery,
        taskName={},
        store={}, // 一个容器
        files=[]; // 文件上传表单
    // 文件上传
    util.uploads(["{:url('loads')}","{:url('delImage')}"],$,function(data){
        let id=data.id,link=data.link;
        files.push(id);
        var ids = $("#filename").val();
        if (ids == '') {
            $("#filename").val(id);
        }
        else{
            $("#filename").val(ids+','+id);
        }
    }).then(id=>{
        files.forEach((item,i)=>{
            if(item==id){
                delete files[i];
            }
        })
        console.log(files);
    })
    // var form = layui.form(),
    //     layer = parent.layer === undefined ? layui.layer : parent.layer,
    //     laypage = layui.laypage,
    //     $ = layui.jquery;


    form.on('submit(*)', function(data){
        // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        
        // 新建loading
        //loading层
        var index2 = layer.load(1);
        // ajax提交添加
        $.ajax({
            url:'{:url("member/material/adds")}',
            type:'POST',
            data:data.field,
            dataType:'json',
            success:function(data){
                console.log(data)
                // 关闭loading
                layer.close(index2);
                // 根据返回结果提示操作是否成功
                if (data.code == 1) {
                    // 添加成功
                    // 关闭输入弹窗
                    // layer.close(index);
                    layer.msg('添加成功');
                    window.location.href = data.url;
                }
                else{
                    // 添加失败
                    layer.msg('添加失败');
                }
            }
        });
          
    });



    $(".tab-head .filter-menu").click(function(){
        var index = $(this).index();
        // $(".tab-body .tab-cont").eq(index).addClass("on")
            // .siblings().removeClass("on");
            // console.log(index)

        $("#media").html('');
        var mediaHtml = '';
        if (index == 0) {
            // 图片
            mediaHtml += '<label class="layui-form-label">图片</label>';
            mediaHtml += '<span class="layui-btn ws-uploads-btn">';
                mediaHtml += '<i class="layui-icon">&#xe64a;</i>';
                mediaHtml += '上传图片';
                mediaHtml += '<input type="file" value="" class="ws-uploads" title=" ">';
                mediaHtml += '<input type="hidden" id="filename" lay-verify="required" name="filename" value="">';
            mediaHtml += '</span>';
            mediaHtml += '<div class="layui-input-block">';
                mediaHtml += '<ul class="ws-images">';
                    // <!-- 这里是图片 -->
                mediaHtml += '</ul>';
            mediaHtml += '</div>';
        }
        else if (index == 1){
            // 视频
            mediaHtml += '<label class="layui-form-label">视频</label>';
            mediaHtml += '<span class="layui-btn ws-uploads-btn">';
                mediaHtml += '<i class="layui-icon">&#xe652;</i>';
                mediaHtml += '上传视频';
                mediaHtml += '<input type="file" value="" class="ws-uploads" title=" ">';
                mediaHtml += '<input type="hidden" id="filename" lay-verify="required" name="filename" value="">';
            mediaHtml += '</span>';
            mediaHtml += '<div class="layui-input-block">';
                mediaHtml += '<ul class="ws-images">';
                    // <!-- 这里是图片 -->
                mediaHtml += '</ul>';
            mediaHtml += '</div>';

            // <!-- 上传视频 -->
            // <video width="320" height="240" controls="controls" src="">  
            // </video>
        }
        $("#media").html(mediaHtml);
    });

})

</script>
{/block}